﻿@{
    ViewBag.Title = "Index";
}
<h2>Add</h2>

 @if (ViewBag.hasFile != true)
 {

   using (Html.BeginForm("Transfer", "EVE", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-inline", role = "form" }))
   {
      
         <div class="form-group">
               <input type="file" id="uploadfile" name="uploadfile"  />      
         </div>
         <div class="form-group">
              <button type="submit" class="btn btn-primary">Update</button>
         </div>  
    }
    <button id='btnLoad'  class="btn btn-primary">LOAD JSON</button>
 }

 <div id='container' class='mtb'>     
 </div>

 <div id='condition' style="display:none" class='mtb'>
    <span id="keycontainer"></span>:<input id='keyvalue'/>
 </div>

 <div class='mtb'>
   <button id='btnGet' class="btn btn-success" >Get</button> <button id='btnClear' class="btn btn-default" >Clear</button>
   <div class="btn-group">
       <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action
          <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
         <li><a id='btnTest' href="#"> Test</a></li>
         <li><a id='btnTest2' href="#">Test2</a></li>
         <li><a id='btnDefaultRegion' href="#">Load Default Region</a></li>
       </ul>
   </div>
 </div>

 <div id="tablecontainer" class='mtb'>
 </div>

 <div id="market" class='mtb'>
 </div>

 <div  class="modal fade" id="view_stat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div class="modal-content"> 
      <div class='modal-body'>
      </div>
    </div>
 </div>
</div>

 <div id='marketContainer' class='mostright row'>
     <div id='labType' class='col-md-7'>
     <div class="panel panel-warning">
     <div class='panel-heading'>
     <div class="panel-title">Stuff</div>
     </div>
     <div class="panel-body">
     <table>       
     </table>
     </div>
     </div>
     </div>

     <div id='labRegion'  class='col-md-7'>
     <div class="panel panel-warning">
     <div class='panel-heading'>
       <div class="panel-title">Region</div>
     </div>
     <div class="panel-body">
     <table> 
     </table>
    
     </div>
     </div>
     </div>
 </div>

<script>
    function GetStuff() {
        GetThing($('#labType table'));
    }

    function GetRegion() {
        GetThing($('#labRegion table'));
    }

    function GetSystem() {
       //To be fix
    }

   

    function RemoveSelf() {
        $t = $(event.target.parentElement);
        $t.remove();
    }

    function GetThing($t) {
        //只能对第一个tr起作用
        if ($(event.target).index() != 0) {
            return false;
        }
        
        var stuff = event.target.parentElement.innerText;
        var _id = $(event.target.parentElement).find('td')[0].innerText;
        var _name = $(event.target.parentElement).find('td')[1].innerText;
        $t.append("<tr><td style='width:50px' onclick='RemoveSelf()'>" + _id + "</td><td>" + _name + "</td></tr>")
    }

    $(document).ready(function () {
        var result;
        var table;
        var hasFile = '@ViewBag.hasFile';
        if (hasFile) {
            LoadJson();
        }
        $('#btnLoad').click(function () {
            LoadJson();
        });

        $('#btnClear').click(function () {
            $('#tablecontainer').html('');
        });

        function LoadJson() {
            $.getJSON('/simpleapp/Content/uploadedfolder/eve.json', function (data) {
                result = data;
                $container = $('#container');
                _.each(data, function (e, i) {
                    $radio = $('<input type="radio"  name="sheet" class="sh">' + i + '</input>')
                              .val(i);
                    $container.append($radio);
                });
            });
        }

        $('#container').on('click', 'input', function () {
            var sheet = $(this).val();
            var _keys = [];
            var data = result[sheet];
            if (data[0]) {
                _.each(data[0], function (e, k) {
                    _keys.push(k);
                });
            }
            var $select = $('<select/>')
            for (var i = 0; i < _keys.length; i++) {
                $select.append($('<option>' + _keys[i] + '</option>'))
            }
            $('#condition').show();
            $('#keycontainer').html('');
            $('#keycontainer').append($select);

        });

        $('#btnTest').on('click', function () {
            var _typeid = $('#labType table').find('td')[0].innerText;
            var _regionids = [];
            var $tr = $('#labRegion table').find('tr');
            _.each($tr, function (e, i) {
                _regionids.push($(e).find('td')[0].innerText);
            });
            $.ajax({
                type: "POST",
                url: '@Url.Action("Market", "EVE")',
                data: {
                    typeid: _typeid,
                    regionid: _regionids.join(',')
                },
                datatype: "html",
                success: function (data) {
                    $('#market').html('');
                    $('#market').html(data);
                }
            });
        });

//        $('#btnTest2').on('click', function () {
//            $.ajax({
//                type: "POST",
//                url: '@Url.Action("QuickLook", "EVE")',
//                data: { typeid: '34', regionlimit: '10000002' },
//                datatype: "html",
//                success: function (data) {
//                    $('#market').html('');
//                    $('#market').html(data);
//                }
//            });
//        });

        $('#btnDefaultRegion').on('click', function () {
            var list = [
                  { _id: '10000002', _name: '伏尔戈' },
                  { _id: '10000033', _name: '赛塔德洱' },
                  { _id: '10000064', _name: '精华之域' },
                  { _id: '10000067', _name: '吉勒西斯' },
                  { _id: '10000068', _name: '维格温铎' }
                ],
                $t = $('#labRegion table');
            _.each(list, function (e,i) {
                $t.append("<tr><td style='width:50px' onclick='RemoveSelf()'>" + e._id + "</td><td>" + e._name + "</td></tr>");
            });
            
        });

        $('#btnGet').on('click', function () {

            var sheet = result[$('input[name="sheet"]:checked').val()];
            var _keys = [];
            if (sheet[0]) {
                _.each(sheet[0], function (e, k) {
                    _keys.push(k);
                });
            }

            var _key, _value;
            _key = $("select").val();
            _value = $('#keyvalue').val();
            var final;
            final = _.filter(sheet, function (o) {
                if (_key.indexOf("ID") > -1) {
                    return o[_key].toString() == _value;
                } else {
                    return o[_key].toString().indexOf(_value) > -1;
                }
            });
            var table = {};
            table.head = _keys;
            table.body = [];
            table.fun = {
                "物品列表$": "GetStuff",
                "星域列表$": "GetRegion",
                "星系列表$": "GetSystem"
            }[$('input[name="sheet"]:checked').val()];
            for (var i = 0; i < final.length; i++) {
                table.body.push({ "tr": _.values(final[i]) });
            }
            //dust
            var tpl = $("#tpl").html();
            var compile = dust.compile(tpl, 'main');
            dust.loadSource(compile)
            dust.render('main', table, function (err, html) {
                $('#tablecontainer').html(html);
            });

        });
    });
 </script>

<script id="tpl" type="text/x-handlebars-template">
    <table class="table">
        <thead>
            <tr>
               {#head}
                  <td>{.}</td>
               {/head}
            </tr> 
        </thead>
        <tbody>
            {#body fun=fun}
               <tr> 
                   {#tr}
                      <td onclick='{fun}()'>{.}</td>
                   {/tr}
               </tr>
            {/body}
        </tbody>
    </table>
</script>







